<template>
    <div style="flex: 1;height: 100%">
        <div class="nullContent" v-if="nullContent">
            <img style="height: 100px;" src="../../assets/images/nullContent.png" alt="">
            暂无数据
        </div>
      <div id='pie' ref="pie" style="display: flex;flex: 1;height: 100%" v-show="!nullContent">
      </div>
    </div>
</template>

<script>
import resize from './mixins/resize';
import { currency } from '@/utils/filters';
export default {
    name: 'Pie',
    mixins: [resize],
    props: {
        pieData: {
            type: Array
        },
        colors: {
            type: Array,
            default: () => ['#0088FF', '#FF8D02', '#1452ba']
        }
    },
    data () {
        return {
            chart: null,
            nullContent: false
        };
    },
    watch: {
        pieData: {
            handler: 'initChart',
            immediate: true
        }
    },
    mounted () {
        this.initChart();
    },
    beforeDestroy () {
        if (!this.chart) {
            return;
        }
        this.chart.dispose();
        this.chart = null;
    },
    methods: {
        initChart () {
            setTimeout(() => {
                let option = {};
                if (this.pieData.length > 0) {
                    this.nullContent = false;
                    let legendColor = ['#0088FF', '#FF0000', '#3ecbcb'];
                    option = {
                        animation: true,
                        grid: {
                            left: '40px',
                            top: '60px',
                            bottom: '30',
                            right: '40px'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        series: [
                            {
                                color: this.colors,
                                type: 'pie',
                                clockwise: false,
                                startAngle: 0,
                                selectedOffset: 10,
                                radius: ['0', '80%'],
                                label: {
                                    position: 'inner',
                                    fontSize: 14
                                },
                                avoidLabelOverlap: true, // 是否启用防止标签重叠策略
                                center: ['50%', '50%'],
                                ...this.pieData[0]
                            }
                        ]
                    };
                } else {
                    option = {
                        // title: {
                        //     show: true,
                        //     textStyle: {
                        //         color: 'grey',
                        //         fontSize: 20
                        //     },
                        //     text: '暂无数据',
                        //     left: 'center',
                        //     top: 'center'
                        // },
                        xAxis: {
                            show: false
                        },
                        yAxis: {
                            show: false
                        },
                        series: []
                    };
                    this.nullContent = true;
                }
                this.chart = echarts.init(this.$refs.pie);
                this.chart.setOption(option);
            }, 400);
        }
    }
};
</script>

<style scoped>

</style>
